<template>
	<view class="ucenter-page">
		<u-navbar title-size="36"  height="42" :border-bottom="false" title="产品搜索"></u-navbar>
		<view class="search-bar">
			<view class="search-inner flex_bd">
				<image src="../../static/images/search-2.png" mode="" class="search-icon"></image>
				<input type="text" value="" v-model="search" placeholder="大家都在搜「挖掘机」" class="ui-input"
					placeholder-style="color:#9C9C9C;" @input="input" />
				<image src="../../static/images/clear.png" class="clear" mode="" v-if="clear" @click="inputClear">
				</image>
			</view>
			<view class="search-btn">搜索</view>
		</view>
		<view class="content">
			<view class="search-panel">
				<view class="head">
					<view class="title">
						搜索记录
					</view>
					<view class="arrow">
						<image src="../../static/images/trash.png" class="trash" mode=""></image>
						删除记录
					</view>
				</view>
				<view class="keys">
					<view class="key">挖机</view>
					<view class="key">混凝土泵车</view>
					<view class="key">搅拌车</view>
					<view class="key">塔式起重机</view>
					<view class="key">履带式挖掘机</view>
				</view>
			</view>
			<view class="search-panel">
				<view class="head">
					<view class="title">
						热门搜索
					</view>
				</view>
				<view class="keys">
					<view class="key"><image src="../../static/images/hot.png" class="hot" mode=""></image>挖机</view>
					<view class="key"><image src="../../static/images/hot.png" class="hot" mode=""></image>混凝土泵车</view>
					<view class="key">搅拌车</view>
					<view class="key">起重机</view>
					<view class="key">履带式挖掘机</view>
				</view>
			</view>
		</view>
		<u-tabbar v-model="current" :list="list" :mid-button="true"></u-tabbar>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
						iconPath: "/static/images/foot1.png",
						selectedIconPath: "/static/images/foot1_on.png",
						text: '首页',
						isDot: false,
						customIcon: false,
						pagePath: "/pages/index/index"
					},
					{
						iconPath: "/static/images/foot2.png",
						selectedIconPath: "/static/images/foot2_on.png",
						text: '产品',
						customIcon: false,
						pagePath: "/pages/product/product"
					},
					{
						iconPath: "/static/images/middle.png",
						selectedIconPath: "/static/images/middle.png",
						midButton: true,
						customIcon: true,
						// midButtonSize:"136",
						pagePath: "/pages/clue/newClue"
					},
					{
						iconPath: "/static/images/foot3.png",
						selectedIconPath: "/static/images/foot3_on.png",
						text: '线索',
						customIcon: false,
						pagePath: "/pages/clue/clue"
					},
					{
						iconPath: "/static/images/foot4.png",
						selectedIconPath: "/static/images/foot4_on.png",
						text: '我的',
						isDot: false,
						customIcon: false,
						pagePath: "/pages/ucenter/ucenter"
					},
				],
				current: 1,
				clear: false,
				search: '',
			}
		},
		onLoad() {

		},
		methods: {
			openUrl(e) {
				console.log(e)
				uni.navigateTo({
					url: e
				});
			},
			input() {
				this.clear = true
			},
			inputClear() {
				this.search = '';
				this.clear = false;
			},
		}
	}
</script>

<style lang="scss">
	.search-bar {
		padding: 16rpx 32rpx 20rpx;
		display: flex;
		align-items: center;
		
		.search-btn{
			font-size: 32rpx;
			color: #15171A;
			font-size: 500;
			line-height: 72rpx;
			margin-left: 34rpx;
		}
	
		.search-inner {
			position: relative;
	
			.search-icon {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				left: 32rpx;
				top: 50%;
				margin-top: -20rpx;
			}
	
			.ui-input {
				height: 72rpx;
				background-color: #F3F4F6;
				border-radius: 36rpx;
				padding-left: 80rpx;
				font-size: 28rpx;
			}
	
			.clear {
				width: 40rpx;
				height: 40rpx;
				display: block;
				position: absolute;
				right: 16rpx;
				top: 50%;
				margin-top: -20rpx;
				z-index: 11;
			}
		}
	}
	
	.content{
		padding: 20rpx 32rpx;
	}
	
	.search-panel{
		margin-bottom: 40rpx;
		.head{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 24rpx;
			
			.title{
				font-size: 32rpx;
				font-weight: 600;
				color: #303337;
			}
			
			.arrow{
				font-size: 28rpx;
				color: #9C9C9C;
				display: flex;
				align-items: center;
				.trash{
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}
			}
		}
		
		.keys{
			.key{
				font-size: 28rpx;
				color: #303337;
				line-height: 40rpx;
				padding: 10rpx 24rpx;
				background-color: #F7F7F7;
				border-radius: 4rpx;
				display: inline-block;
				margin-right: 16rpx;
				margin-bottom: 24rpx;
				
				.hot{
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
					margin-left: -12rpx;
					margin-bottom: -4rpx;
				}
			}
		}
	}

	/deep/ .u-tabbar__content__circle__button {
		width: 136rpx !important;
		height: 136rpx !important;
	}

	/deep/ .u-tabbar__content__circle__button image {
		width: 136rpx !important;
		height: 136rpx !important;
	}

	/deep/ .u-tabbar__content__circle__border {
		display: none !important;
	}
</style>
